在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius
属性,然后overflow:hidden
,子元素最初没有问题,
但是加上了一个animate
动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是position
定位的问题,
但是改用了margin
方式定位还是不行,后来发现可能是由于transform
的问题,
在父元素上加上一行-webkit-transform:rotate(0deg)
即解决了,附上代码
<div class="div-1">
<div class="div-1-box">
<div class="div-1-animate animate-move"></div>
</div><!--div-1-box-->
</div><!--div-1-->
<style>
.div-1{width:70%; height:2rem; margin-top:35%; margin-left:15%; background-color:#3a1c98; border-radius:30px; position:relative; box-shadow:0 0 10px 3px #a376d4;}
.div-1 .div-1-box{width:60%; height:100%; border-radius:30px; overflow:hidden; -webkit-transform:rotate(0deg);}
.div-1 .div-1-box .div-1-animate{width:400%; height:100%; margin-left:-300%; background:url(../images/img_08.png) repeat-x 0 0; background-size:auto 100%;}
.animate-move{
animation:move 4s linear infinite both;
-webkit-animation:move 4s linear infinite both;
}
@keyframes move{
from{}
to{transform:translateX(75%);}
}
@-webkit-keyframes move{
from{}
to{-webkit-transform:translateX(75%); transform:translateX(75%);}
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。